<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="240px"
             label-position="left">
      <el-form-item label="证件类型" prop="unitType">
        <el-radio-group v-model="formData.unitType" size="medium">
          <el-radio-button v-for="(item, index) in typeOptions" :key="index" :label="item.value"
                           :disabled="item.disabled" border>{{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="formData.unitType==1?'营业执照':'组织证照'" prop="field112" required>
        <el-upload ref="field112" :file-list="formData.field112"
                   :on-change="fileChange"
                   :action="field112Action" :auto-upload="false"
                   :headers="requestHeader"
                   :multiple="true"
                   :limit="6"
                   accept=".png,.jpg,.jepg"
                   :on-success="uploadImage"
                   :on-remove="handleRemove"
                   :before-upload="field112BeforeUpload" list-type="picture-card">
          <i class="el-icon-plus"></i>
          <div slot="tip" class="el-upload__tip">只能上传不超过 2MB 的文件</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="企业名称" prop="customerUnitName">
        <el-input v-model="formData.customerUnitName" placeholder="请输入企业名称" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="社会信用代码/其他组织机构代码" prop="socialCreditCode">
        <el-input v-model="formData.socialCreditCode" placeholder="请输入社会信用代码/其他组织机构代码" clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="通讯地址" prop="field115">
        <el-cascader v-model="formData.field115" :options="citydata" :props="field115Props" @change="changeAddress"
                     :style="{width: '100%'}" placeholder="请选择通讯地址" clearable></el-cascader>
      </el-form-item>
      <el-form-item label="通讯地址详情" prop="field116">
        <el-input v-model="formData.field116" type="textarea" placeholder="请输入通讯地址详情"
                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}" @change="changeAddress"></el-input>
      </el-form-item>
      <el-form-item label="企业法人姓名" prop="comContactName">
        <el-input v-model="formData.comContactName" placeholder="请输入企业法人姓名" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="法人身份证" prop="comContactIdCard">
        <el-input v-model="formData.comContactIdCard" placeholder="请输入法人身份证" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="联系人手机号" prop="personTel">
        <el-input v-model="formData.personTel" placeholder="请输入联系人手机号" clearable :style="{width: '100%'}"
                  disabled>
          <el-select v-model="formData.phoneType" slot="prepend" placeholder="请选择" style="width: 170px" disabled>
            <el-option :label="item.label" :value="item.value" v-for="item in phoneSource"></el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label-width="1px" label="" prop="field120">
        <el-checkbox-group v-model="formData.field120" size="medium">
          <el-checkbox v-for="(item, index) in field120Options" :key="index" :label="item.value"
                       :disabled="item.disabled">{{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item size="large">
        <el-button @click="lastStep">上一步</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {getCityList} from "@/api/option";

export default {
  components: {},
  props: ['dataInfo'],
  data() {
    return {
      phoneSource: [
        {
          label: '中国大陆（+86）',
          value: '1'
        }
      ],
      formData: {
        id: '',
        unitType: 2,
        field112: [],
        customerUnitName: '长沙塞翁电子科技有限公司',
        socialCreditCode: '91430102072633691J',
        field115: [],
        field116: '',
        comContactName: '肖林',
        comContactIdCard: '43011119981215073x',
        personTel: '',
        field120: [],
        comContactAddr: '',
        compics: ''
      },
      rules: {
        unitType: [{
          required: true,
          message: '证件类型不能为空',
          trigger: 'change'
        }],
        customerUnitName: [{
          required: true,
          message: '请输入企业名称',
          trigger: 'blur'
        }],
        socialCreditCode: [{
          required: true,
          message: '请输入社会信用代码/其他组织机构代码',
          trigger: 'blur'
        }],
        field115: [{
          required: true,
          type: 'array',
          message: '请至少选择一个field115',
          trigger: 'change'
        }],
        field116: [{
          required: true,
          message: '请输入通讯地址详情',
          trigger: 'blur'
        }],
        comContactName: [{
          required: true,
          message: '请输入企业法人姓名',
          trigger: 'blur'
        }],
        comContactIdCard: [{
          required: true,
          message: '请输入法人身份证',
          trigger: 'blur'
        },
          {
            pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[Xx\d]$/,
            message: '非法身份证号',
            trigger: 'blur'
          }],
        personTel: [{
          required: true,
          message: '请输入联系人手机号',
          trigger: 'blur'
        }, {
          pattern: /1[3456789]\d{9}/g,
          message: '请输入正确手机号',
          trigger: 'blur'
        }],
        field120: [{
          required: true,
          type: 'array',
          message: '请确认阅读实名认证主体变更协议',
          trigger: 'change'
        }],
      },
      field112fileList: [],
      typeOptions: [{
        "label": "营业执照",
        "value": 1
      }, {
        "label": "非营业执照",
        "value": 2
      }],
      citydata: [],
      field120Options: [{
        "label": "我已阅读并同意《实名认证主体变更协议》",
        "value": 1
      }],
      field115Props: {
        expandTrigger: 'hover',
        children: 'children',
        label: 'name',
        value: 'name',
        checkStrictly: 'true'
      },
    }
  },
  computed: {
    requestHeader() {
      return {
        Authorization: 'Bearer ' + this.$store.getters.token
      }
    },
    field112Action() {
      return process.env.VUE_APP_BASE_API + '/common/upload'
    },
  },
  watch: {
    dataInfo: {
      deep: true,
      handler(val) {
        this.formData.personTel = val.phone
        this.formData.phoneType = val.phoneType
      }
    }
  },
  created() {
  },
  mounted() {
    this.init()
    getCityList({pid: 0}).then(response => {
      this.citydata = response.data;
    });
  },
  methods: {
    uploadImage(response, file, fileList) {
      if (response.code == 200) {
        if (this.formData.compics) {
          this.formData.compics += response.fileName
        } else {
          this.formData.compics = response.fileName
        }
        this.field112fileList.push(1)
        console.log(this.formData.field112, this.field112fileList,
          this.formData.field112.length == this.field112fileList.length)
        if (this.formData.field112.length == this.field112fileList.length) {
          this.$emit('submit', this.formData, () => {
            this.init()
          })
        }
      }
    },
    changeAddress() {
      let address = ''
      for (let i = 0; i < this.formData.field115.length; i++) {
        address = address + this.formData.field115[i]
      }
      this.formData.comContactAddr = address + this.formData.field116
    },
    init(){
      console.log(this.dataInfo)
      this.formData.personTel = this.dataInfo.phone
      this.formData.phoneType = this.dataInfo.phoneType
      this.formData.id = this.dataInfo.id
      this.field112fileList = []
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.$refs.field112.submit();
        // TODO 提交表单
      })
    },
    handleRemove(file, fileList) {
      this.formData.field112 = fileList
    },
    lastStep() {
      this.$emit('lastStep')
    },
    fileChange(file, fileList) {
      this.formData.field112 = fileList
    },
    field112BeforeUpload(file, fileList) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

</style>
